<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes ColorChange {
        0% {
          outline: 1px solid lightgreen;
        }

        50% {
          outline: 1px solid green;
        }

        1000% {
          outline: 1px solid lightgreen;
        }
      }

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        outline: 1px solid red;
        animation: ColorChange 500ms ease infinite;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    </style>
  </head>

  <body>
    <svg width="600"
         height="600"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         stroke-linecap="round"
         stroke-linejoin="round"
         viewBox="0 0 600 600">
      <!-- 第九章 文本 -->

      <text x="0"
            y="240"
            style="font-size: 40px; fill: none; stroke: red">
        Hello World!
      </text>
      <text x="0"
            y="280"
            style="font-size: 40px; fill: none; stroke: red">
        Hello World!
      </text>

      <g style="font-size: 18pt">
        <text x="20"
              y="20"
              style="font-weight: bold">bold</text>
        <text x="120"
              y="20"
              style="font-style: italic">italic</text>
        <text x="20"
              y="60"
              style="text-decoration: underline">under</text>
        <text x="120"
              y="60"
              style="text-decoration: overline">over</text>
        <text x="200"
              y="60"
              style="text-decoration: line-through">
          through
        </text>
        <text x="20"
              y="90"
              style="word-spacing: 10pt">more word space</text>
        <text x="20"
              y="120"
              style="word-spacing: -3pt">less word space</text>
        <text x="20"
              y="150"
              style="letter-spacing: 5pt">
          wide letter space
        </text>
        <text x="20"
              y="180"
              style="letter-spacing: -6pt">
          narrow letter space
        </text>
      </g>

      <defs>
        <g id="textAlign"
           style="font-size: 14pt">
          <path d="M 100 10 100 100"
                style="stroke: gray; fill: none" />
          <text x="100"
                y="30"
                style="text-anchor: start">Start</text>
          <text x="100"
                y="60"
                style="text-anchor: middle">Middle</text>
          <text x="100"
                y="90"
                style="text-anchor: end">End</text>
        </g>

        <g id="tspan">
          <text x="10"
                y="30"
                style="font-size:12pt;">
            Switch among
            <tspan style="font-style:italic">italic</tspan>
            , normal, and
            <tspan style="font-weight:bold">bold</tspan>
            text.
            3<tspan dx="0"
                   dy="-10"
                   style="font-size: 10px;">2</tspan>
          </text>
        </g>
        <!-- 绝对定位 -->
        <g id="position">
          <text x="10"
                y="30"
                style="font-size:12pt;">
            They dined on mince, and slices of quince,
            <!-- 绝对定位 -->
            <tspan x="20"
                   y="50">Which they ate with a
              runcible spoon;</tspan>
            <tspan x="10"
                   y="70">And hand in hand, on the edge
              of the sand,</tspan>
            <tspan x="20"
                   dy="20">They danced by the light of the moon.</tspan>
          </text>
        </g>
        <!-- dx\dy\rotate可以同时单独设置多个字母的位置 -->
        <g id="rotation">
          <text x="30"
                y="30"
                style="font-size:14px">It's
            <tspan dx="0 4 -3 5 -4 6"
                   dy="0 -3 7 3 -2 -8"
                   rotate="5 10 -5 -20 0 15">shaken</tspan>,
            not stirred.
            <tspan x="30"
                   y="50"
                   dx="0 -3 3 0 0"
                   dy="0 0 40 -40 0"
                   rotate="40 -20 0 0 0"
                   letter-spacing="3">abcde</tspan>
          </text>
        </g>

        <!-- 设置上下标 -->
        <g id="uhxwbc">
          <text x="20"
                y="25"
                style="font-size: 12pt;">
            C<tspan style="baseline-shift: sub;font-size: 8px;">12</tspan>
            H<tspan style="baseline-shift: sub;font-size: 8px;">22</tspan>
            O<tspan style="baseline-shift: sub;font-size: 8px;">11</tspan> (sugar)
          </text>
          <text x="20"
                y="70"
                style="font-size: 12pt;">
            6.02 x 10<tspan baseline-shift="super"
                   font-size="8px">23</tspan>
            (Avogadro's number)
          </text>
        </g>

        <!-- 文字长度 -->
        <!--
          lengthAdjust：设置文字文字拉长的适配方式
            spacing：拉开字符间距
            spacingAndGlyphs：拉伸字符
         -->
        <g id="length"
           style="font-size: 14pt;">
          <path d="M 20 10 20 70 M 220 10 220 70"
                style="stroke: gray;" />
          <text x="20"
                y="30"
                textLength="200"
                lengthAdjust="spacing">Two words</text>
          <text x="20"
                y="60"
                textLength="200"
                lengthAdjust="spacingAndGlyphs">Two words</text>
          <text x="20"
                y="90">Two words
            <tspan style="font-size: 10pt;">(normal length)</tspan>
          </text>
          <path d="M 20 100 20 170 M 100 100 100 170"
                style="stroke: gray;" />
          <text x="20"
                y="120"
                textLength="80"
                lengthAdjust="spacing">Two words</text>
          <text x="20"
                y="160"
                textLength="80"
                lengthAdjust="spacingAndGlyphs">Two words</text>
        </g>


        <!-- 纵向文本 -->
        <g id="vertical">
          <text x="10"
                y="20"
                transform="rotate(90,10,20)">Rotated 90</text>
          <text x="50"
                y="20"
                style="writing-mode: tb;">Writing Mode tb</text>
          <text x="90"
                y="20"
                style="writing-mode: tb;
           glyph-orientation-vertical: 0;">Vertical zero</text>
        </g>

        <!-- 国际化 -->
        <g id="national"
           style="font-size: 14pt;">
          <text x="10"
                y="30">Greek: </text>
          <text x="100"
                y="30">
            αβγδε
          </text>
          <text x="10"
                y="50">Russian:</text>
          <text x="100"
                y="50">
            абвгд
          </text>
          <text x="10"
                y="70">Hebrew:</text>
          <text x="100"
                y="70">
            אבגדה) written right to left)
          </text>
          <text x="10"
                y="90">Arabic:</text>
          <text x="100"
                y="90">
            (left to right written(ا ب ج د
          </text>
          <text x="10"
                y="130">
            This is
            <tspan style="direction: rtl; unicode-bidi: bidi-override; font-weight: bold;">
              right-to-left
            </tspan> writing.
          </text>
        </g>

        <!-- systemLanguage：匹配系统语言类型设置展示的语言 -->
        <g id="switch">
          <circle cx="40"
                  cy="60"
                  r="20"
                  style="fill: none; stroke: black;" />
          <g font-size="12pt">
            <switch>
              <g systemLanguage="en-UK">
                <text x="10"
                      y="30">A circle.</text>
                <text x="10"
                      y="100">without colour.</text>
              </g>
              <g systemLanguage="en">
                <text x="10"
                      y="30">A circle</text>
                <text x="10"
                      y="100">without color.</text>
              </g>
              <g systemLanguage="es">
                <text x="10"
                      y="30">Un circulo</text>
                <text x="10"
                      y="100">sin color.</text>
              </g>
              <g systemLanguage="ru">
                <text x="10"
                      y="30">Kpyr</text>
                <text x="10"
                      y="100">6e3 CBeTa.</text>
              </g>
            </switch>
          </g>
        </g>

        <!-- 9.7.3 使用自定义字体不学，跳过 -->

      </defs>

      <use xlink:href="#textAlign"
           x="250"
           y="0" />
      <use xlink:href="#tspan"
           x="220"
           y="90" />
      <use xlink:href="#position"
           x="240"
           y="150" />
      <use xlink:href="#rotation"
           x="390"
           y="0" />
      <use xlink:href="#uhxwbc"
           x="240"
           y="250" />
      <use xlink:href="#length"
           x="0"
           y="290" />
      <use xlink:href="#vertical"
           x="110"
           y="380" />
      <use xlink:href="#national"
           x="230"
           y="340" />
      <use xlink:href="#switch"
           x="0"
           y="480" />

    </svg>

    <script>
      const ele = document.querySelector("#xxx");
      let n = 0;
      function Renderer() {
        n++;
        if (n >= 360) n = 0;
        window.requestAnimationFrame(Renderer);
      }
      // Renderer();
    </script>
  </body>

</html>
